Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add simple JS config migration #14639

Merged
merged 16 commits into from
Oct 11, 2024
Merged

Add simple JS config migration #14639

merged 16 commits into from
Oct 11, 2024

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Oct 10, 2024 •
edited
Loading

This PR implements the first version of JS config file migration to CSS. It is based on the most simple config setups we are using in the Tailwind UI templates Commit, Primer, Radiant, and Studio.

The example we use in the integration test is a config that looks like this:

import { type Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

module.exports = {
  darkMode: 'selector',
  content: ['./src/**/*.{html,js}'],
  theme: {
    boxShadow: {
      sm: '0 2px 6px rgb(15 23 42 / 0.08)',
    },
    colors: {
      red: {
        500: '#ef4444',
      },
    },
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '2rem' }],
    },
    extend: {
      colors: {
        red: {
          600: '#dc2626',
        },
      },
      fontFamily: {
        sans: 'Inter, system-ui, sans-serif',
        display: ['Cabinet Grotesk', ...defaultTheme.fontFamily.sans],
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
} satisfies Config

As you can see, this file only has a darkMode selector, custom content globs, a theme (with some theme keys being overwriting the default theme and some others extending the defaults). Note that it does not support plugins and/or presets yet.

In the case above, we will find the CSS file containing the existing @tailwind directives and are migrating it to the following:

@import 'tailwindcss';

@source './**/*.{html,js}';

@variant dark (&:where(.dark, .dark *));

@theme {
  --box-shadow-*: initial;
  --box-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08);

  --color-*: initial;
  --color-red-500: #ef4444;

  --font-size-*: initial;
  --font-size-xs: 0.75rem;
  --font-size-xs--line-height: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-sm--line-height: 1.5rem;
  --font-size-base: 1rem;
  --font-size-base--line-height: 2rem;

  --color-red-600: #dc2626;

  --font-family-sans: Inter, system-ui, sans-serif;
  --font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --border-radius-4xl: 2rem;
}

This replicates all features of the JS config so we can even delete the existing JS config in this case.

@philipp-spiess philipp-spiess marked this pull request as ready for review October 10, 2024 15:45
philipp-spiess
philipp-spiess commented Oct 11, 2024
View reviewed changes
integrations/upgrade/index.test.ts Show resolved Hide resolved
integrations/upgrade/index.test.ts Outdated Show resolved Hide resolved
integrations/upgrade/index.test.ts Show resolved Hide resolved
philipp-spiess and others added 16 commits October 11, 2024 15:15
@philipp-spiess philipp-spiess merged commit 0cfb984 into next Oct 11, 2024
1 check passed
@philipp-spiess philipp-spiess deleted the feat/migrate-js-config branch October 11, 2024 13:27
adamwathan
adamwathan reviewed Oct 11, 2024
View reviewed changes
CHANGELOG.md Show resolved Hide resolved
integrations/upgrade/js-config.test.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/codemods/migrate-config.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/codemods/migrate-config.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/codemods/migrate-config.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/migrate-js-config.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/migrate-js-config.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/migrate-js-config.ts Show resolved Hide resolved
packages/@tailwindcss-upgrade/src/migrate-js-config.ts
}

// Applies heuristics to determine if we can attempt to migrate the config
function isSimpleConfig(unresolvedConfig: Config, source: string): boolean {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we rename this to something that will remain accurate even as we support more complex configs? Like canMigrateConfig or something?

This was referenced Oct 11, 2024
Merged
Merged
@philipp-spiess
Copy link
Member Author

Addressed @adamwathan's comments in: #14650

philipp-spiess added a commit that referenced this pull request Oct 11, 2024
@philipp-spiess @adamwathan
Support the color property in JS theme configuration callbacks (#14651
c009c9c 
)

While working on some fixes for #14639 I noticed that the following v3
configuration file would not load properly in v4:

```ts
import { type Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: ({ colors }) => ({
        gray: colors.neutral,
      }),
  },
} satisfies Config
```

The reason for this is that we did not pass the `colors` property to the
callback function. Since we have colors available now, we can easily add
it.

---------

Co-authored-by: Adam Wathan <[email protected]>
philipp-spiess added a commit that referenced this pull request Oct 14, 2024
@philipp-spiess @thecrypticace
Address follow-up work for #14639 (#14650)
4b19de3 
This PR adds a few more test cases to #14639 and updates the
documentation.

---------

Co-authored-by: Jordan Pittman <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamwathan adamwathan adamwathan left review comments

@RobinMalfait RobinMalfait RobinMalfait left review comments

@thecrypticace thecrypticace thecrypticace approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@philipp-spiess @thecrypticace @RobinMalfait @adamwathan